import React from 'react';
import { TContainerProps } from './Types';
import { V } from './containers';
import { Inter } from './Texts';

export interface TCardProps extends TContainerProps {
  /**
   * 卡片标题
   */
  title?: string;
  /**
   * 卡片副标题
   */
  subtitle?: string;
  /**
   * 卡片头部操作
   */
  headerAction?: React.ReactNode;
  /**
   * 卡片底部操作
   */
  footerAction?: React.ReactNode;
  /**
   * 是否显示阴影
   */
  shadow?: boolean;
  /**
   * 卡片变体
   */
  variant?: 'default' | 'elevated' | 'outlined';
  /**
   * 内容区域的内边距
   */
  contentPadding?: number;
  /**
   * 子元素
   */
  children?: React.ReactNode;
}

export function Card({
  title,
  subtitle,
  headerAction,
  footerAction,
  shadow = true,
  variant = 'default',
  contentPadding = 16,
  children,
  ...props
}: TCardProps) {
  const cardStyle = getCardStyle(variant, shadow);

  return (
    <V {...cardStyle} {...props}>
      {/* Header */}
      {(title || subtitle || headerAction) && (
        <V
          row
          jc="sb"
          ai="c"
          p={[16, 16, contentPadding === 16 ? 0 : contentPadding]}
          style={{ borderBottomWidth: 1, borderBottomColor: '#f1f5f9' }}
        >
          <V f={1}>
            {title && (
              <V mb={subtitle ? 4 : 0}>
                <Inter fs={16} fw="600" c="#1e293b">
                  {title}
                </Inter>
              </V>
            )}
            {subtitle && (
              <V>
                <Inter fs={14} c="#64748b">
                  {subtitle}
                </Inter>
              </V>
            )}
          </V>
          {headerAction && <V>{headerAction}</V>}
        </V>
      )}

      {/* Content */}
      <V p={contentPadding}>{children}</V>

      {/* Footer */}
      {footerAction && (
        <V
          p={[contentPadding === 16 ? 0 : contentPadding, 16, 16]}
          style={{ borderTopWidth: 1, borderTopColor: '#f1f5f9' }}
        >
          {footerAction}
        </V>
      )}
    </V>
  );
}

function getCardStyle(variant: string, shadow: boolean) {
  const baseStyle = {
    backgroundColor: '#ffffff',
    borderRadius: 12,
  };

  const variantStyles = {
    default: {
      ...baseStyle,
    },
    elevated: {
      ...baseStyle,
      elevation: shadow ? 4 : 0,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: shadow ? 0.1 : 0,
      shadowRadius: shadow ? 4 : 0,
    },
    outlined: {
      ...baseStyle,
      borderWidth: 1,
      borderColor: '#e2e8f0',
    },
  };

  return variantStyles[variant as keyof typeof variantStyles];
}
